Date field

Keyboard

• Tab reaches the text input, then the calendar trigger .dp-open; focus does not open the panel.
• ↓ in the input opens the Picker panel; Enter commits the typed text; Esc closes an open panel and returns focus to the input.
• Inside the panel the Calendar grid takes focus (autoFocus), with arrow / Home / End / PageUp / PageDown navigation (see Calendar).
• Leaving the field (Tab out) commits valid text, discards unfinished text and always closes the panel.

ARIA

• Input: aria-label (default "Datum"), aria-invalid when .err; autocomplete="off".
• Trigger: aria-label="Otevřít kalendář", aria-haspopup="dialog", aria-expanded.
• Panel: role="dialog" with aria-label="Vybrat datum" (Picker panel).
• The echo line .dp-echo is plain text under the field; it is not linked with aria-describedby.

Focus

• Field ring: .dp-field:focus-within — border --accent + 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent).
• Trigger ring: .dp-open:focus-visible — 2px solid var(--accent), offset 1px.
• Closing the panel (Esc, pick, clear) returns focus to the input (closePanel).

Contrast

Ratios from packages/ui/src/tokens/tokens.css:

• Value --ink-900 on --surface-100: 17.59:1 light, 14.53:1 dark.
• Placeholder --fg-muted on --surface-100: 2.85:1 light, 3.63:1 dark — below AA for text.
• Echo --fg-muted at 11.5px: 2.85:1 light — known limit; .bad --critical: 3.91:1 light, 4.35:1 dark.
• Focus ring --accent on --surface-100: 4.44:1 light, 3.83:1 dark (above 3:1 non-text).
• Error border --critical on --surface-100: 3.91:1 light.

Known limits

• The echo line is visual only; screen readers hear the committed value but not the live interpretation.
• Parser notes are Czech and hard-coded in parse-date-input.ts; locale changes formatting, not the grammar.
• Placeholder and echo contrast are below AA 4.5:1 in light mode.
• .dp-echo uses a literal 11.5px instead of the --hint token (AD 26 Aug 2026) — drift to fix in the engine.